<template>
    <!-- 可以有多个根元素 -->
    <div>当前鼠标位置</div>
    <div>x: {{ mouse.x }}</div>
    <div>y: {{ mouse.y }}</div>
    <div>当前点击次数：{{ count }}</div>
    <button @click="add">点击</button>
</template>
  
<script>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
const useCount = () => {
    // 业务A代码-----开始
    const count = ref(0)
    const add = () => {
        count.value++
    }
    // 业务A代码-----结束

    return { count, add }
}

// 业务B
const useMove = () => {

    // 业务B代码-----开始
    const mouse = reactive({
        x: 0,
        y: 0,
    })

    const move = (e) => {
        mouse.x = e.pageX
        mouse.y = e.pageY
    }
    onMounted(() => {
        document.addEventListener('mousemove', move)
    })
    onUnmounted(() => {
        document.removeEventListener('mousemove', move)
    })
    // 业务B代码-----结束
    return { mouse }
}

export default {
    setup() {
        const { count, add } = useCount()

        const { mouse } = useMove()


        // template需要用到的数据，我们需要主动 return 出去
        return {
            count,
            add,
            mouse,
        }
    },
}
</script>
  